<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>巧恩</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="css/freeze.css" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/animate.css">

		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/slick.min.js"></script>
		<script src="js/placeholdem.min.js"></script>
		<script src="js/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
		<script src="js/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
		<script src="js/waypoints.min.js"></script>
		<script src="js/script.js"></script>
		<script src="js/gallery_resize.js">
		</script>
		<script src="js/bootstrap.min.js">
		</script>

		<script>
			$(document).ready(function() {
				appMaster.preLoader();
			});
		</script>

		<style>
			body {
				background-color: white;
			}
			
			.img-control {}
		</style>

	</head>

	<body>

		<!--
	作者：754054708@qq.com
	时间：2017-11-28
	描述：加载动画
-->
		<div class="pre-loader">
			<div class="load-con">
				<img src="images/logo.png" class="animated" alt="" />
				<div class="spinner">
					<div class="bounce1"></div>
					<div class="bounce2"></div>
					<div class="bounce3"></div>
				</div>
			</div>
		</div>

		<!--
        	作者：754054708@qq.com
        	时间：2017-11-23
        	描述：顶部菜单栏
        -->
		<header style="margin-top: 0px;">
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="fa fa-bars fa-lg"></span>
						</button>
						<img src="images/505545.png" style="width: 40px;margin-left: 50%;-webkit-transform: translate(-50%, 0);" align="center" />
					</div>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" style="width: 30%;float: right;" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="subindex/aboutus.html">关于我们</a>
						</li>
						<li>
							<a href="subindex/subproject.html">巧恩课程</a>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
				<!-- /.container-->
			</nav>

		</header>

		<!--
        	作者：754054708@qq.com
        	时间：2017-11-23
        	描述：主体内容
        -->
		<div class="wrapper" style="background-color: white;">
			<div class="pagebanner aboutus" style="height: 335px;">
				<div class="container">
					<!--<h3>About us</h3>-->
				</div>
			</div>

			<h2 align="center">关于我们</h2>

			<ul class="mui-table-view mui-grid-view">

				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="images/shuijiao.jpg">
						<div class="mui-media-body">item1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="images/muwu.jpg">
						<div class="mui-media-body">item2</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="images/cbd.jpg">
						<div class="mui-media-body">item3</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="images/yuantiao.jpg">
						<div class="mui-media-body">item4</div>
					</a>
				</li>
			</ul>

			<div style="min-height: 200px;background-color: gray; text-align: center;position: relative;">
				<h5 class="text-brife" style="top: 80%;left:0;right: 0;-webkit-transform: translate(0,-50%);position: absolute;">了解更多</h5>
			</div>

			<h3 align="center">教学课程</h3>

			<ul class="mui-table-view mui-grid-view">

				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="images/shuijiao.jpg">
						<div class="mui-media-body">title1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="images/muwu.jpg">
						<div class="mui-media-body">title2</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
						<div class="mui-media-body">title3</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="images/yuantiao.jpg">
						<div class="mui-media-body">title</div>
					</a>
				</li>
			</ul>

			<div class="pagebanner aboutus" style="height: 200px; background: url(images/pagebanner-aboutus.jpg);">
				<div class="container">
					<img style=" width: auto;height: 100px;" src="images/qrcode.png" />
					<h5>巧恩二维码商城</h5>
				</div>
			</div>

			<h3 align="center" style="margin-top: 30px;">合作伙伴</h3>

			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="images/ic_platform_douyu.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="images/ic_platform_huajiao.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="images/ic_platform_meipai.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="images/ic_platform_miaopai.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>

			</ul>

			<form style="min-height: 200px;background-color: lightgray; position: relative;">
				<div style="position: absolute; top: 50%;left: 0;right: 0;">
					<h4 style="color: white;-webkit-transform: translate(0, -50%);" align="center">预约体验表格</h4>
				</div>
			</form>
			<div class="pagebanner aboutus" style="height: 200px;">
				<div class="container">
					<a href="tel:10086">
						<h5>联系我们</h5>
					</a>
				</div>
			</div>

		</div>

		<!--
        	作者：754054708@qq.com
        	时间：2017-11-23
        	描述：标题右上方下拉的内容
        -->
		<div id="topPopover" class="mui-popover" style="width: 140px;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="subindex/aboutus.html">关于我们</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="subindex/subproject.html">巧恩课程</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- PageBanner /- -->
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
		</script>

	</body>

</html>